<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSX创建虚拟DOM</title>
  <style>
    body {
      background-color: #2b2b2b;
      color: wheat;
    }
    .color {
      color: red;
    }
  </style>
  <!--按顺序引入-->
  <script src="https://cdn.staticfile.org/react/16.8.4/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.8.4/umd/react-dom.development.js"></script><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>

<script type="text/babel">
  const data = ['Angular', 'Vue', 'React']
  // 创建虚拟DOM jsx
  const VDOM = (
    <div>
      <h1>前端框架展示列表</h1>
      <ul>
        {
          data.map((item, index) => {
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    </div>
  )
  // 渲染
  ReactDOM.render(VDOM, document.getElementById('app'))
</script>
</body>
</html>
